<template>
  <div class="header-wrap">
    <div class="header-abs" @click="goBack" v-show="showAbs">
      <i class="iconfont">&#xe624;</i>
    </div>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
      <div class="header-lt" @click="goBack">
        <span class="iconfont">&#xe624;</span>
      </div>
      景点详情
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    showOrHideAbs: function (flag) {
      if (this.showAbs !== flag) {
        this.showAbs = flag
      }
    },
    goBack: function () {
      this.$router.go(-1)
    },
    handleScroll (e) {
      const top = e.target.documentElement.scrollTop || e.target.body.scrollTop
      if (top > 60) {
        if (top < 140) {
          let opacity = top / 140
          this.opacityStyle = { opacity }
        } else if (this.opacityStyle.opacity !== 1) {
          this.opacityStyle = { opacity: 1 }
        }
        this.showOrHideAbs(false)
      } else {
        this.showOrHideAbs(true)
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl'
.header-wrap{
  .header-abs{
    z-index 2
    cursor pointer
    position fixed
    top: 0.05rem;
    left: 0.02rem;
    width .8rem
    height .8rem
    line-height .8rem
    border-radius 50%
    text-align center
    color #fff
    background rgba(0,0,0,0.8)
  }
  .header-fixed{
    width 100%
    position fixed
    z-index 2
    top 0
    left 0
    height $headerHeight
    line-height $headerHeight
    text-align center
    color #ffffff
    background $bgColor
    font-size .32rem
    padding-right .84rem
    box-sizing border-box
    .header-lt{
      float left
      width 0.84rem
      text-align center
      font-size .4rem
    }
  }
}
</style>
